<template>
  <div class="main">
    <div class="header">我的预约</div>
    <div class="mainBox">
      <div class="dropDownMenu">
        <img
          src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/state-icon.png"
          alt=""
          @click="showMenu"
        />
        <div class="menu" v-if="menu">
          <div
            class="statesItem"
            v-for="item in states"
            :key="item.id"
            @click="handelrSelectState(item.id)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="orderList" @click="menu = false">
        <div
          class="orderItem"
          v-for="item in orders"
          :key="item.id"
          @click="toOrderDetail(item.id)"
        >
          <div class="name">{{ item.name }}</div>
          <div>活动时间：{{ item.startTime }}</div>
          <div class="line"></div>
          <div>
            <img
              src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/32.png"
              alt=""
            />
            仟金传家旗舰店
          </div>
          <div>
            <img
              src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/33.png"
              alt=""
            />
            江苏省南京市秦淮区太平南路166-4号
          </div>
          <div>
            <img
              src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/30.png"
              alt=""
            />
            400-8700-290
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
// import { useRouter } from "vue-router";
import { getAcitveOrder } from "../../common/api.js";

// const router = useRouter();
const menu = ref(false);
const states = ref([
  { name: "全部", id: null },
  { name: "待到店", id: 0 },
  { name: "已到店", id: 1 },
  { name: "已完成", id: 2 },
  { name: "已过期", id: 4 },
  { name: "已取消", id: 3 },
]);
const orders = ref([]);

onMounted(() => {
  getAcitveOrderList({
	  pageNo: 1,
	  pageSize: 100,
  });
});

const getAcitveOrderList = (page, size, status) => {
  getAcitveOrder({
    pageNo: 1,
    pageSize: 100,
    status: status,
  }).then((res) => {
    console.log("getAcitveOrderList", res.data);
    orders.value = res.data.list;
    orders.value.forEach((ele) => {
      if (ele.status == 0) {
        ele.status = "待到店";
      } else if (ele.status == 1) {
        ele.status = "已到店";
      } else if (ele.status == 2) {
        ele.status = "已完成";
      } else if (ele.status == 3) {
        ele.status = "已取消";
      } else if (ele.status == 4) {
        ele.status = "已过期";
      }
    });
  });
};
const handelrSelectState = (state) => {
  console.log("state", state);
  getAcitveOrderList(1, 100, state);
};
const showMenu = () => {
  menu.value = !menu.value;
};
const toOrderDetail = (id) => {
  router.push({
    name: "OrderDetail",
    query: {
      activeOrderId: id,
    },
  });
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: scroll;
  width: 100%;
  height: 100vh;
  background-color: $sys_theme;
  .mainBox {
    width: 100%;
    height: 88.36vh;
    overflow: hidden;
    .dropDownMenu {
      position: relative;
      img {
        z-index: 99999;
        width: 7.87vw;
      }
      .menu {
        position: absolute;
        top: 1.79vh;
        right: 39vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        width: 21.2vw;
        height: 17.92vh;
        padding: 0.37vh 0.4vw;
        background-color: rgba(108, 10, 6, 1);
        .statesItem {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: $font-size-small;
          height: 2.7vh;
          background-color: $sys_theme;
        }
      }
    }
    .orderList {
      box-sizing: border-box;
      overflow-y: scroll;
      width: 100%;
      height: 86.4vh;
      padding: 0 7.47vw;
      padding-bottom: 1.97vh;
      margin-top: 1.97vh;

      .orderItem {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        height: 15.27vh;
        padding: 1.87vw;
        margin-bottom: 1.6vh;
        border-radius: 1.33vw;
        font-size: $font-size-small-s;
        color: rgba(177, 121, 25, 1);
        background: url("https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/item-bg.png")
          no-repeat center center;
        background-size: cover;
        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
        .line {
          height: 1px;
          width: 100%;
          background-color: rgba(220, 173, 93, 1);
        }
        .name {
          font-size: 2.93vw;
          font-weight: 600;
        }
        img {
          width: 2.53vw;
          margin-right: 2vw;
        }
        div {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .header {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    top: 0;
    z-index: 99999999;
    height: 9.61vh;
    width: 100%;
    font-size: $font-size-medium;
    font-weight: 600;
  }
}
</style>